<template>
  <div>

    <div :style="back" style="width: 100vw;height: 85vh; position: fixed;top: 8%;left: 0; ">

    </div>
    <div>
      <div style="position: relative;width: auto;height: auto; border-radius: 30px; background-color: rgb(255,255,255,0.4); padding-top: 24px">
        <el-descriptions class="margin-top" border="border"  title="　　个人信息" :column="2" size="mediu" style="opacity: 0.7;text-align: center">

          <el-descriptions-item label="昵称">
            {{ user.name }}
          </el-descriptions-item>

          <el-descriptions-item label="手机号" >
            {{ user.phone }}
          </el-descriptions-item>

          <el-descriptions-item label="年龄" >
            {{ user.age }}

          </el-descriptions-item>
          <el-descriptions-item label="联系地址">
            {{ user.address }}

          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="left: 0;margin-top: 10%; position: relative">

        <el-button native-type="button" class="but">剩余书币： {{ user.score }}</el-button>

        <hr>

        <el-button @click="$router.push('/manage/borrow')" native-type="button" class="but">借书记录</el-button>

        <hr>

        <el-button @click="$router.push('/manage/returnBook')" native-type="button" class="but">还书记录</el-button>

        <hr>

        <el-button @click="$router.push('/manage/information')" native-type="button" class="but">修改信息</el-button>

        <hr>

        <el-button @click="$router.push('/manage/about')" native-type="button" class="but">关于我们</el-button>

        <hr>

        <el-button native-type="button" @click="logout" class="but">退出当前账号</el-button>

        <hr>
      </div>
    </div>

  </div>


</template>

<script>
import request from "@/utils/request";
import Cookies from "js-cookie";

export default {
  name: "user.vue",
  data() {
    return {
      user: Cookies.get('user') ? JSON.parse(Cookies.get('user')) : {},
      back: {
        backgroundImage: 'url(' + require('../../assets/a.png') + ')',
        backgroundRepeat: 'no-repeat',
      },
    }
  },
  methods: {
    logout() {
      Cookies.remove('user');
      this.$router.push("/login");
      this.$message.success("退出成功")
    },


  },
  created() {
    request.get('/user/' + this.user.id).then(res => {
      this.user = res.data;
    })
  }


}
</script>

<style>

.but {
  background-color: rgb(0, 0, 0, 0);
  width: 100%;
  font-size: 20px;
  margin: auto;
  margin-top: 10px;
  text-align: left;
  border: none;

}

hr {
  border-top: 1px #0066CC;
}
button{
  font-weight: bolder !important;
  color: rgb(0,0,0);
}

</style>
